import React, { Component } from 'react'
import { Card,Row, Col } from 'antd'
// 全部引入
const echarts = require('echarts')

export default class DashBoard extends Component {
  constructor(){
    super();
    this.state = {
      chart: null,
      chart2: null
    }
  }
  render() {
    return (
      <Card title="仪表盘"> 
        <Row gutter={10}>
          <Col span={6}>
            <div style={{height: 200,background:'#fa9579'}}/>
          </Col>
         <Col span={6}>
           <div style={{height: 200,background:'#654062'}}/>
         </Col>
         <Col span={6}>
           <div style={{height: 200,background:'#65d6ce'}}/>
         </Col>
                  
         <Col span={6}>
            <div style={{height: 200,background:'#ffe9d6'}}/>
         </Col>
                                   
                
        </Row>
        
        <Row gutter={10} style={{marginTop:10}}>
          <Col span={12}>
            <div id="chart" style={{height: 400}}/>
          </Col>
         <Col span={12}>
           <div id="chart2" style={{height: 400}}/>
         </Col>
                                           
        </Row>
      </Card>
    )
  }
  componentDidMount(){
    this.initChart()
    this.initChart2()
  }
  initChart = ()=>{
    const chart = echarts.init(document.getElementById('chart'));
    // 绘制图表
    chart.setOption({
        color:['#03506f','#d08752'],
        title: {
            text: 'ECharts 入门示例',
            textStyle:{
              color: '#65d6ce'
            }
        },
        tooltip: {},
        xAxis: {
            data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
        },
        yAxis: {},
        dataZoom:[
          {
             type:'slider'
          },
          {
             type:'inside'
          }
        ],
        series: [
          {
            name: '销量',
            type: 'bar',
            data: [5, 20, 36, 10, 10, 20]
          },
          {
            name: '价格',
            type: 'line',
            smooth: true,
            data: [15, 30, 46, 20, 25, 30]
          }
        ]
    })
    this.setState({
      chart
    })
  }
  initChart2 = ()=>{
    const chart2= echarts.init(document.getElementById('chart2'));
    chart2.setOption( {
    backgroundColor: '#060e2b',
    tooltip : {
        formatter: "{a} <br/>{b} : {c}%"
    },
    toolbox: {
        feature: {
            restore: {},
            saveAsImage: {}
        }
    },
    series: [
        {
            name: 'PUE',
            type: 'gauge',
            radius: "80%",
            center: ["50%", "75%"],
            splitNumber: 5|| 100,
            min: 1,
            max: 2,
            startAngle: 180,
            endAngle: 0,
            detail: {formatter:'PUE= {value}'},
            data: [{value: 1.5, name: ' '}],
            splitLine: {
                    length: 50,//刻度节点线长度
                    lineStyle: {width: 2, color: ['#02e3f0']}//刻度节点线
                },
            axisLine: { // 坐标轴线
                    lineStyle: {
                    width: 15,
                    shadowBlur: 0,
                    color: [
                            [0,'#1aadd8'],
                            [0.3, '#1798c1'],
                            [0.5, '#d4701b'],
                            [0.7, '#bf3032'],
                            [1, '#b7203e']
                        ]
                    }
                },
        },
         {
                    type: 'gauge',
                    center: ["50%", "75%"],
                    radius: '85%',  // 1行3个
                    splitNumber: 5|| 100,
                    min: 1,
                    max: 2,
                    startAngle: 180,//刻度起始
                    endAngle: 0,//刻度结束
                    axisLine: {
                        show: true,
                        lineStyle: {
                            width: 2,
                            shadowBlur: 0,
                            color: [
                                [1, '#02e3f0']
                            ]
                        }
                    },
                    axisTick: {
                        show: true,
                        lineStyle: {
                            color: '#02e3f0',
                            width: 1
                        },
                        length: -5,
                        splitNumber: 10
                    },
                    splitLine: {
                        show: true,
                        length: -14,
                        lineStyle: {
                            color: '#02e3f0',
                        }
                    },
                    axisLabel: {
                        distance: -20,
                        textStyle: {
                            color: '#02e3f0',
                            fontSize: '14',
                            fontWeight: 'bold'
                        }
                    },
                    pointer: {
                        show: 0
                    },
                    detail: {
                        show: 0
                    }
                }
    ]
})
    this.setState({
      chart2
    })
  }
}
